import { useState } from 'react';
import ReactMarkdown from 'react-markdown' // 阅读器
import MdEditor from 'react-markdown-editor-lite'; // 编辑器
// import style manually
import 'react-markdown-editor-lite/lib/index.css'; // 样式
type MarkDownProps = {}

export const MarkDown = (props: MarkDownProps) => {
  const [content, setContent] = useState('')
  return (
    <>
      <h1>MarkDown编辑器</h1>
      <MdEditor style={{ height: '500px' }} renderHTML={text => {
          
          return <ReactMarkdown>{ text }</ReactMarkdown>
        }} onChange={ ( { html, text }: { html: any; text: any}) => {
          console.log('html', typeof html);
          console.log('text', text);
          setContent(html)
          console.log('content', content)
        }} />
        <hr/>
        <div dangerouslySetInnerHTML={{ __html: content }}></div>
    </>
  )
};